<template>
<div id="sub-page-header">
	<div class="pull-left">
		<i @click="routerBack()" class="iconfont icon-left"></i>
	</div>
	<span>{{title}}</span>
	<slot name="center"></slot>
	<div class="pull-right" style="margin-right:10px">
		<slot name="right"></slot>
	</div>
</div>
</template>

<script>
export default {
	name: 'sub-page-header',
	props: [
		'fixed',
		'title',
		'triggerBack'
	],
	mounted () {
		window.addEventListener('scroll', this.onScroll);
	},
	methods: {
		onScroll (e) {
			let el = this.$el;
			let visibleTop = window.scrollY;
			let clientHeight = this.$el.clientHeight;
				
			if (visibleTop > clientHeight+clientHeight && el.style.position != 'fixed') {
				el.style.position = 'fixed';
				el.style.top = 0;
				return;
			}
			if (visibleTop == 0 && el.style.position != 'static'){
				el.style.position = 'static';
				return;
			}
		},
		routerBack () {
			if (!this.triggerBack) {
				this.$router.back();	
			} else {
				this.$emit('back');	
			}
		}
	},
	beforeDestroy () {
		window.removeEventListener('scroll', this.onScroll);
	}
}
</script>

<style scoped>
#sub-page-header {
	height: 50px;
	line-height: 50px;
	background-color: #fff;
	border-bottom: 1px solid #eaeaea;
	text-align: center;
	width: 100%;
	z-index: 100;
}

.icon-left {
	margin-left: 10px;
}
</style>